<!-- 全屏 -->
<template>
  <div>
    <i
      :class="[
        'el-icon',
        isFullscreen ? 'el-icon-close-full-screen' : 'el-icon-full-screen',
      ]"
      @click="handleFull"
      style="font-size: 26px"
    ></i>
  </div>
</template>
<script>
import screenfull from "screenfull";
export default {
  data () {
    return {
      isFullscreen: false,
    };
  },
  methods: {
    handleFull () {
      if (screenfull.isEnabled) {
        // 加个判断浏览器是否支持全屏
        screenfull.toggle(); // 切换全屏状态
      } else {
        console.log("您的浏览器不支持全屏");
      }
    },
  },
};
</script>

